<template>
  <section class="integral-config">
    <section v-for="(item, i) in group" :key="i" class="set-card">
      <el-collapse accordion>
        <el-collapse-item>
          <template slot="title">
            <div class="myTitle">
              {{ item.name }}
            </div>
          </template>
          <section class="card-inner">
            <el-form label-width="320px" :label-position="labelPosition">
              <el-form-item
                :label="ite.name"
                v-for="(ite, j) in item.list"
                :key="j"
              >
                <el-input
                  onkeyup="value=value.replace(/[^-.\d]/g,'')"
                  v-model.trim="ite.value"
                  :placeholder="`请输入${ite.error ? ite.error : ite.name}`"
                  style="width: 40%"
                />
                <el-button
                  :loading="ite.loadingBtn"
                  type="primary"
                  style="margin-left: 10px"
                  @click="handleComit(ite)"
                  >确 定</el-button
                >
                <el-tag size="mini" style="margin-left: 30px">{{
                  ite.nameTime ? "上次设置时间：" + ite.nameTime : "未设置"
                }}</el-tag>
              </el-form-item>
            </el-form>
          </section>
        </el-collapse-item>
      </el-collapse>
    </section>
  </section>
</template>
<script>
import { setDataByType, getDataByType } from './api'
export default {
  name: 'IntegralConfig',
  data() {
    return {
      loadingBtn: false,
      labelPosition: 'left',
      group: [
        {
          name: '课程学习积分配置',
          list: [
            {
              code: 'LEARN_SUBJECT_DURATION',
              name: '课程学习时长获得积分设置/秒',
              error: '课程学习时长获得积分',
              type: 'num',
              value: '',
              nameTime: '',
              loadingBtn: false
            }, {
              code: 'LEARN_SUBJECT_POINTS',
              name: '课程学习获得积分设置',
              error: '课程学习获得积分',
              type: 'num',
              value: '',
              nameTime: '',
              loadingBtn: false
            }, {
              code: 'LEARN_SUBJECT_MAX_SCORE',
              name: '课程学习获得积分每日上限',
              type: 'num',
              value: '',
              nameTime: '',
              loadingBtn: false
            }
          ]
        },
        {
          name: '闯关积分配置',
          list: [
            {
              code: 'LEARN_SUCC_POINTS',
              name: '闯关成功获得日常积分',
              type: 'num',
              value: '',
              nameTime: '',
              loadingBtn: false
            },
            {
              code: 'LEARN_FAIL_POINTS',
              name: '闯关成失败获得日常积分',
              type: 'num',
              value: '',
              nameTime: '',
              loadingBtn: false
            },
            {
              code: 'LEARN_EVERYDAY_MAX_SCORE',
              name: '每日闯关积分上限，控制可换金币积分，-1不控制',
              error: '每日闯关积分上限',
              type: 'num',
              value: '',
              nameTime: '',
              loadingBtn: false
            }
          ]
        },
        {
          name: '专项答题积分配置',
          list: [
            {
              code: 'ACTIVITY_SUCC_POINTS',
              name: '活动成功获得日常积分',
              type: 'num',
              value: '',
              nameTime: '',
              loadingBtn: false
            },
            {
              code: 'ACTIVITY_FAIL_POINTS',
              name: '活动成失败获得日常积分',
              type: 'num',
              value: '',
              nameTime: '',
              loadingBtn: false
            },
            {
              code: 'ACTIVITY_EVERYDAY_MAX_SCORE',
              name: '每日活动积分上限，控制可换金币积分',
              error: '每日活动积分上限',
              type: 'num',
              value: '',
              nameTime: '',
              loadingBtn: false
            }
          ]
        }
      ]
    }
  },
  created() {
    const loading = this.$loading({
      lock: true,
      text: '请稍后...',
      spinner: 'el-icon-loading',
      background: 'rgba(0, 0, 0, 0.7)'
    })
    this.group.forEach(element => {
      element.list.forEach(e => {
        this.getSystemData(e)
      })
    })
    loading.close()
  },
  methods: {
    handleComit(ite) {
      if (!ite.value) {
        return this.$message.error(`请输入${ite.error ? ite.error : ite.name} `)
      }
      ite.loadingBtn = true
      return new Promise((resolve, reject) => {
        setDataByType({ configName: ite.code, configValue: ite.value }).then((res) => {
          ite.loadingBtn = false
          this.$message({
            title: '成功',
            message: '设置成功',
            type: 'success',
            duration: 1500
          })
          this.getSystemData(ite)
        }).catch(error => {
          ite.loadingBtn = false
          reject(error)
        })
      })
    },
    getSystemData(item) {
      return new Promise((resolve, reject) => {
        getDataByType({ name: item.code }).then((res) => {
          item.value = res.data.data.configValue || ''
          item.nameTime = res.data.data.updTime || ''
        }).catch(error => {
          reject(error)
        })
      })
    }
  }
}
</script>
<style lang="scss">
.integral-config {
  padding: 10px;
  min-height: calc(100vh - 60px);
  max-height: calc(100vh - 60px);
  overflow: hidden;
  .myTitle {
    // background: #000;
    height: 100%;
    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
    // line-height: 30px;
  }
  &::-webkit-scrollbar {
    width: 8px; /*对垂直流动条有效*/
    height: 1px; /*对水平流动条有效*/
  }
  /** 滚动条轨道*/
  &::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-color: white;
    border-radius: 3px;
  }
  /** 滚动条里面小方块*/
  &::-webkit-scrollbar-thumb {
    height: 32px;
    border-radius: 5px;
    box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2);
    background-color: #eaeaea;
  }
  &:hover {
    overflow: auto;
  }

  .set-info,
  .set-card {
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    .el-collapse {
      border-top: none;
      border-bottom: none;
      .el-collapse-item__header {
        padding-left: 10px;
        border-bottom: none;
        overflow: hidden;
        text-overflow: ellipsis;
        .el-tag {
          margin-left: 10px;
        }
        .name {
          flex-shrink: 0;
          white-space: nowrap;
        }
      }
      .el-collapse-item__content {
        padding: 10px;
      }
      .el-collapse-item__wrap {
        border-bottom: none;
        border-top: 1px solid #e6ebf5;
      }
    }
  }

  .set-card {
    margin-top: 10px;
  }

  .set-info {
    .info-item {
      padding-bottom: 8px;
      vertical-align: top;
      display: flex;
      .item-label {
        color: rgba(0, 0, 0, 1);
        font-weight: 400;
        font-size: 14px;
        line-height: 1.5715;
        text-align: start;
      }
      .item-content {
        flex: 1 1;
        color: rgba(0, 0, 0, 0.85);
        font-size: 14px;
        line-height: 1.5715;
        word-break: break-word;
        overflow-wrap: break-word;
      }
    }
  }

  .color-inner {
    display: flex;
    align-items: center;
    .inner-item {
      width: 25px;
      height: 25px;
      margin-right: 8px;
      color: #fff;
      font-size: 20px;
      font-weight: 700;
      border-radius: 2px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      > i {
        display: none;
      }
      &.active i {
        display: inline-block;
      }
    }
  }
}
</style>
